<?php

// -----------------------------------------------------------------------------

include "config/config.php";
include "global/globalAuth.php";
include "createDBIfNotExists.php";

// -----------------------------------------------------------------------------

// 设置时区
ini_set('date.timezone', $timezone);
// 取得今日日期
$today = date('Y-m-d');

// -----------------------------------------------------------------------------

?>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>批量制定文章复习计划</title>
    <link rel="stylesheet" href="resources/bootstrap-4.3.1-dist/css/bootstrap.min.css">
</head>
<body>

<!-- ----------------------------------------------------------------------- -->

<?php include 'global/globalNavBar.php'; ?>

<!-- ----------------------------------------------------------------------- -->

<div class="container mt-2">

<!-- ----------------------------------------------------------------------- -->

    <form action="editAddArticlesFormAction.php" method="post" class="form-group mt-2">

        <div>

            <div>
                <label for="inputDate">起始记忆日期：</label>
                <input id="inputStartDate"
                       name="startDate"
                       type="date"
                       class="form-control form-control-sm" tabindex="1"
                       value="<?php echo $today; ?>"
                       required>
            </div>

            <div class="mt-2">

                <lablel>段落分割符：</lablel>

                <!-- Button trigger modal -->
                <a href=""
                   class="badge badge-pill badge-info"
                   data-toggle="modal"
                   data-target="#exampleModalScrollable">使用帮助
                </a>

                <input type="text"
                       id="inputSeparator"
                       name="separator"
                       class="form-control form-control-sm mt-2"
                       value="@@"
                       tabindex="2"
                       required>
            </div>

            <div class="mt-2">
                <textarea name="contents"
                          id="inputcontents"
                          cols="30"
                          rows="10"
                          class="form-control mt-2"
                          autofocus tabindex="3"
                          required></textarea>
            </div>

        </div>

        <div class="mt-2">
            <button type="submit" class="btn btn-sm btn-outline-primary" tabindex="4">生成</button>
            <button id="btnReset" type="button" class="btn btn-sm btn-outline-secondary" tabindex="5">清空</button>
        </div>

    </form>

<!-- ----------------------------------------------------------------------- -->

    <!-- Modal -->
    <div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalScrollableTitle">使用帮助</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>假如你打算花十天时间背诵100首诗歌，每天背诵10首。那么你可以一次性输入100首诗歌，每十首诗歌用段落分割符号（比如说@@）分隔开来。</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">知道了</button>
                </div>
            </div>
        </div>
    </div>

</div>

<!-- ----------------------------------------------------------------------- -->

<script src="resources/jquery/jquery-3.4.0.min.js"></script>
<script src="resources/bootstrap-4.3.1-dist/js/bootstrap.min.js"></script>

<!-- ----------------------------------------------------------------------- -->

<script>
    // 点击清空按钮时执行的动作
    $('#btnReset').click(function () {
        $('#inputcontents').val('');
        $('#inputcontents').focus();
    })
</script>

<!-- ----------------------------------------------------------------------- -->

</body>
</html>